import React, { Component } from "react";
export default class App extends Component {
  //1. 声明状态
  state = {
    user: '',
    pass: '',
    phone: ''
  }

  render() {
    //结构赋值
    let {user, pass, phone} = this.state;
    return (
      <div>
        <h2>登录</h2>
        <hr />
        {/* 2. 使用状态值作为 input 元素的 value 值 */}
        用户名: <input name='user' type="text" value={user} onChange={this.saveData}/><br />
        密码: <input name='pass' type="password" value={pass} onChange={this.saveData} /><br />
        手机号: <input name='phone' type="password" value={phone} onChange={this.saveData} /><br />
        <hr />
        <button onClick={this.login}>登录</button>
        <button onClick={this.clear}>清空</button>
      </div>
    );
  }

  //保存input的值
  saveData = (e) => {
    this.setState({
      [e.target.name] : e.target.value
    })
  }

  //保存用户名的回调
  saveUser = (e) => {
    //3. 修改 user 的状态
    // 当输入内容的时候, 即时是受控组件, 按键字符也输入到了 input 框中, 只不过 react 获取到值之后, 又还原
    this.setState({
      user: e.target.value
    })
  }

  //保存密码的回调
  savePass = (e) => {
    this.setState({
      pass: e.target.value
    })
  }

  //登录的方法
  login = () => {
    console.log(this.state.user)
    console.log(this.state.pass)
  }

  //清空操作
  clear = () => {
    //修改状态
    this.setState({
      user: '',
      pass: ''
    })
  }
  
}


